<template>
  <div>
    <slot name="echarts">
      <div class="echar" ref="bar"></div>
      <div class="echar" ref="pie"></div>
    </slot>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAllcount, getpiecount as pie } from '@/api/car'
export default {
  created() {},
  mounted() {
    this.bar()
    this.pie()
  },
  data() {
    return {
      bra: '',
      username: 'admin11',
      password: 'admin123'
    }
  },
  methods: {
    bar() {
      getAllcount({ username: this.username, pwd: this.password }).then(
        (res) => {
          // console.log(res)
          // 基于准备好的dom，初始化echarts实例
          const myChart = echarts.init(this.$refs.bar)
          // 使用刚指定的配置项和数据显示图表。
          // 指定图表的配置项和数据
          const option = {
            xAxis: {
              type: 'category',
              data: res.data.datatime
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: res.data.number,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                },
                itemStyle: {
                  color: '#5988ec'
                },
                // 实现数字展示在柱状图
                label: {
                  show: true,
                  position: 'inside',
                  color: '#ffffff'
                }
              }
            ]
          }
          myChart.setOption(option)
        }
      )
    },
    pie() {
      pie().then((res) => {
        let data = res.data,
          datatime = [],number=[]
        if (data.length > 0) {
          for (let item of data) {
            datatime.push(item.datatime)
            number.push(item.number)
          }
          // console.log(datatime)
          // console.log(number);
        }
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(this.$refs.pie)
        const option = {
          title: {
            text: '时间统计图',
            // subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            data:datatime,
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.echar {
  width: 100%;
  height: calc(50vh - 2.6667rem);
}
</style>
